<template>
  <div id="heal-1">
    <div id="heal">
      <div id="heal-2">
        <div></div>
        <span>居民详情</span>
        <button>发消息</button>
      </div>
      <div id="heal-3">
        <div
          :class="active == 1 ? 'activeClass1' : 'activeClass2'"
          @click="cli1()"
        >
          健康档案
        </div>
        <div
          :class="active == 2 ? 'activeClass1' : 'activeClass2'"
          @click="cli2()"
        >
          健康记录
        </div>
        <div
          :class="active == 3 ? 'activeClass1' : 'activeClass2'"
          @click="cli3()"
        >
          签约消息
        </div>
        <div
          :class="active == 4 ? 'activeClass1' : 'activeClass2'"
          @click="cli4()"
        >
          服务记录
        </div>
      </div>
      <div id="heal-4">
        <component :is="Healthys" @change="kk" ></component>
      </div>
    </div>
  </div>
</template>

<script>
import Healthys from "./Healthys.vue";
import Record from "./Record.vue";
import Service from "./Service.vue";
import SignAContract from "./SignAContract.vue";
export default {
  
  data() { 
    return {
      Healthys: "Healthys",
      active: 0,
      id: null,
      params:null
    };
  },
  components: {
    Healthys,
    Record,
    Service,
    SignAContract,
  },
  methods: {
      btnclick(params){
          this.params=this.id
      },
    cli1(index) {
      this.Healthys = "Healthys";
      //把index值赋给active，点击改变样式

      // alert(this.id);//打印结果为{user:'david'}
      this.active = 1;
    },
    cli2(index) {
      this.Healthys = "Record";
      //把index值赋给active，点击改变样式
      // alert(this.id);//打印结果为{user:'david'}
      this.active = 2;
    },
    cli3(index) {
      this.Healthys = "SignAContract";
      //把index值赋给active，点击改变样式
      this.active = 3;
    },
    cli4(index) {
      this.Healthys = "Service";
      //把index值赋给active，点击改变样式
      this.active = 4;
    },
    kk(){
        this.$router.push({path:'Healthys',query:{id:this.id}});

        
    }
  },
  mounted() {
    this.id = this.$route.query.id;
    //  alert(this.id);//打印结果为{user:'david'}
  },
};
</script>

<style>
.activeClass1 {
  background-color: #1877f2;
}
.activeClass2 {
  background-color: #f9fbfb;
}
#heal-4 {
  float: left;
  width: 100%;
  height: 500px;
}
#heal-3 div {
  float: left;
  width: 10%;
  height: 100%;
  /* background-color: rgb(147, 11, 11); */
  /* margin-left: 10px; */
  text-align: center;
  line-height: 50px;
  color: rgb(29, 23, 65);
}
#heal-3 {
  width: 90%;
  height: 50px;
  margin-left: 5%;
  float: left;
  background-color: #f9fbfb;
  border: 1px solid #c5cdd3;
  margin-top: 20px;
}
#heal-2 button {
  float: right;
  width: 80px;
  height: 50px;
  margin-right: 30px;
  margin-top: 13px;
  background-color: #28d094;
  color: #fff;
  border: 1px solid #28d094;
}
#heal-2 span {
  float: left;
  margin-left: 15px;
  margin-bottom: 40px;
  margin-top: 25px;
  font-size: 150%;
}
#heal-2 > div:nth-child(1) {
  width: 10px;
  height: 30px;
  background-color: #1877f2;
  -webkit-border-radius: 5px;
  margin-left: 40px;
  margin-top: 27px;
  float: left;
}
#heal-2 {
  width: 100%;
  height: 80px;
  /* background-color: red; */
  float: left;
}
#heal {
  width: 90%;
  height: 1650px;
  float: left;
  margin-left: 5%;
  margin-top: 30px;
  background-color: #fff;
}
#heal-1 {
  background-color: #f2f7fb;
}
</style>